<template>
    <div>
        <van-nav-bar title="我的页面" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <div class="conte">
            <p>昵称:{{ info.nickName }}</p>
            <p>登录名:{{ info.loginName }}</p>
            <p>个性签名:{{ info.introduceSign }}</p>
        </div>
        <div class="box-order" @click="$router.push('/order')">
            <p>我的订单</p>
            <van-icon name="arrow" />
        </div>
        <div class="box-order">
            <p>账号管理</p>
            <van-icon name="arrow" />
        </div>
        <div class="box-order" @click="$router.push('/addressList')">
            <p>地址管理</p>
            <van-icon name="arrow" />
        </div>
        <div class="box-order">
            <p>关于我们</p>
            <van-icon name="arrow" />
        </div>
    </div>
</template>
<script setup>
import { getInfo } from "@/api/index.js"
import { onMounted, ref } from "vue"
let info = ref({})
onMounted(() => {
    getInfoData()
})

let getInfoData = () => {
    getInfo().then(res => {
        if (res.resultCode === 200) {
            info.value = res.data
        }
    })
}
</script>
<style lang="less" scoped>
.conte {
    width: 95%;
    margin: 0 auto;
    padding: 10px 0;
    background-color: rgb(30, 173, 173);
    color: #fff;
    font-size: 16px;
    border-radius: 10px;
    margin-bottom: 30px;

    p {
        margin-top: 10px;
        margin-left: 10px;
        width: 80%;
        height: 30px;
        line-height: 30px;
    }
}

.box-order {
    width: 90%;
    height: 50px;
    line-height: 50px;
    color: rgb(167, 166, 166);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(243, 242, 242);
    margin-top: 20px;
    margin: 0 auto;
}
</style>
